import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtTag } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { get_my_reservation_api } from './service'

import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import { pay_api } from '@/pages/Consulting/Reservation/service'
/**
 * 我的预约界面
 */
class MyReservation extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      reservation_list: [],
      system: '',
      pageNum: 1,
      pageSize: 20,
    }
  }
  componentWillMount() {
    const system = Taro.getStorageSync('system')
    this.setState(
      {
        system,
      },
      () => {
        this.get_my_reservation()
      },
    )
  }
  // 获取列表
  get_my_reservation() {
    const { reservation_list, pageSize, pageNum } = this.state
    const params = {
      pageSize,
      pageNum,
    }
    get_my_reservation_api(params).then(({ result, data }) => {
      const arr = Array.from(data)
      this.setState({
        reservation_list: reservation_list.concat(...arr),
      })
    })
  }
  handleClick(value) {
    this.setState(
      {
        reservation_list: [],
        pageNum: 1,
      },
      () => {
        this.get_my_reservation()
      },
    )
  }

  gotoDetail(id) {
    Taro.navigateTo({
      url: `/pages/Consulting/ConsultingDetails/index?isOrder=true&id=${id}`,
    })
  }

  onReachBottom() {
    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_my_reservation()
      },
    )
  }

  render() {
    const consultTeacherTypeArr = ['', '高级', '资深', '主任', '专家']
    const { reservation_list, system } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的预约' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <View style='background-color: #FAFBFC;text-align: center; padding-top:10px'>
            {reservation_list.length === 0 ? (
              <View style='color:#8c8c8c'>暂无数据...</View>
            ) : (
              reservation_list.map((c, i) => {
                return (
                  <View className='wrapper' key={i}>
                    <View className='orderNo'>订单编号：{c.sn}</View>
                    <View className='content'>
                      <View className='left'>
                        <CImage src={c.therapistImg}></CImage>
                      </View>
                      <View className='right'>
                        <View className='title'>
                          <View>{c.therapistName}</View>
                        </View>
                        <View className='courses'>国家{consultTeacherTypeArr[c.consultTeacherType]}心理咨询师</View>
                        <View className='tabs'>
                          {c.label
                            ? c.label.split(',').map((current, index) => {
                                return (
                                  <AtTag type='primary' size='small' circle key={index}>
                                    {current}
                                  </AtTag>
                                )
                              })
                            : ''}
                        </View>

                        <View className='price'>{system.indexOf('iOS') < 0 ? ` ￥${c.price}元/${c.time}分钟` : '免费'}</View>
                        <View className='appointmentName'>预约姓名：{c.appointmentName}</View>
                        <View className='appointmentPhone'>预约电话：{c.appointmentPhone}</View>
                      </View>
                    </View>
                  </View>
                )
              })
            )}
          </View>
        </View>
      </View>
    )
  }
}

export default MyReservation
